<template>
  <view style="position: relative;" v-show="system.title">
    <view class="home-wrap" :style="{background:system.bgcolor}">
      <section :ref="item" v-for="(item, index) in templateList[tagIndex]" :key="index" class="section" :class="[item]" :data-name="item">

        <diy-base v-if="item.indexOf('base') !== -1" :confData="templateData[tagIndex][index]" :index="index"/>

        <diy-swiper v-if="item.indexOf('swiper') !== -1" :confData="templateData[tagIndex][index]" :index="index"/>

        <diy-nav v-if="item.indexOf('nav') !== -1" :confData="templateData[tagIndex][index]" :index="index"/>

        <diy-video v-if="item.indexOf('video') !== -1" :confData="templateData[tagIndex][index]" :index="index" ref="video" />

        <diy-hr v-if="item.indexOf('hr') !== -1" :confData="templateData[tagIndex][index]" :index="index"/>

        <diy-space v-if="item.indexOf('space') !== -1" :confData="templateData[tagIndex][index]" :index="index"/>

        <diy-title v-if="item.indexOf('title') !== -1" :confData="templateData[tagIndex][index]" :index="index"/>

        <diy-text v-if="item.indexOf('text') !== -1" :confData="templateData[tagIndex][index]" :index="index"/>

        <diy-search v-if="item.indexOf('search') !== -1" :confData="templateData[tagIndex][index]" :index="index"/>

        <diy-notice v-if="item.indexOf('notice') !== -1" :confData="templateData[tagIndex][index]" :index="index" ref="notice"/>

        <diy-coupon v-if="item.indexOf('coupon') !== -1" :confData="templateData[tagIndex][index]" :index="index"/>

        <diy-goods v-if="item.indexOf('goods') !== -1" :confData="templateData[tagIndex][index]" :index="index"/>

        <diy-cube v-if="item.indexOf('cube') !== -1" :confData="templateData[tagIndex][index]" :index="index"/>

        <diy-tab v-if="item.indexOf('tab') !== -1" :confData="templateData[tagIndex][index]" :index="index"/>
<!--        <diy-group v-if="item.indexOf('group') !== -1" :confData="templateData[tagIndex][index]" :index="index"/>-->
<!--        <diy-flash v-if="item.indexOf('flash') !== -1" :confData="templateData[tagIndex][index]" :index="index"/>-->
<!--        <diy-kill v-if="item.indexOf('kill') !== -1" :confData="templateData[tagIndex][index]" :index="index"/>-->
      </section>
    </view>
  </view>

</template>

<script>

// import {getDiySkinConfig} from "@/common/fetch";

import { GetQueryByString, setNavigationBarTitle } from '@/common/helper'
import { pageMixin } from '@/mixins'
import DiyBase from '@/components/diy-base/diy-base'
import DiySwiper from '@/components/diy-swiper/diy-swiper'
import DiyNav from '@/components/diy-nav/diy-nav'
import DiyVideo from '@/components/diy-video/diy-video'
import DiyHr from '@/components/diy-hr/diy-hr'
import DiySpace from '@/components/diy-space/diy-space'
import DiyTitle from '@/components/diy-title/diy-title'
import DiyText from '@/components/diy-text/diy-text'
import DiySearch from '@/components/diy-search/diy-search'
import DiyNotice from '@/components/diy-notice/diy-notice'
import DiyCoupon from '@/components/diy-coupon/diy-coupon'
import DiyGoods from '@/components/diy-goods/diy-goods'
import DiyCube from '@/components/diy-cube/diy-cube'
import DiyTab from '@/components/diy-tab/diy-tab'
import { hideLoading, modal } from '@/common/fun'
import { diy } from '@/api'
import { Exception } from '@/common/Exception'
// import DiyGroup from '@/components/diy-group/diy-group'
// import DiyFlash from '@/components/diy-flash/diy-flash'
// import DiyKill from '@/components/diy-kill/diy-kill'

export default {
  mixins: [pageMixin],
  data () {
    return {
      selfObj: null,
      templateList: [],
      templateData: [],
      tagIndex: 0,
      system: {}
    }
  },
  components: {
    // DiyKill,
    // DiyFlash,
    // DiyGroup,
    DiyTab,
    DiyCube,
    DiyGoods,
    DiyCoupon,
    DiyNotice,
    DiySearch,
    DiyText,
    DiyTitle,
    DiySpace,
    DiyHr,
    DiyVideo,
    DiyNav,
    DiySwiper,
    DiyBase

  },

  created () {

  },
  methods: {
    async _init_func (SKIN_ID) {
      try {
        const skinData = await diy({ id: SKIN_ID }, { tip: 'loading', mask: true }).then(res => JSON.parse(res.data.skin)).catch(e => { throw e })

        const templateData = skinData.plugin
        this.system = skinData.system

        setNavigationBarTitle(skinData.system.title)

        // 存储页面数据
        this.templateData = [] // 页面数据的二维数组。
        this.templateList = [] // 页面组件的二维数组。

        if (templateData && Array.isArray(templateData[0])) {
          // 多个页面，每个页面是一个数组
          templateData.map(item => {
            this.templateData.push(item)
            this.templateList.push([])
          })
        } else if (templateData && !Array.isArray(templateData[0]) && templateData.length > 0) {
          // 单纯是一个对象的时候？？
          this.templateData = [templateData]
          this.templateList = [[]]
        } else {
          this.templateData = [[]]
          this.templateList = [[]]
        }
        // this.templateData = templateData
        // 存储页面组件templateList
        for (let i = 0; i < this.templateData.length; i++) {
          if (this.templateData[i] && this.templateData[i] !== []) {
            this.templateData[i].map(m => {
              this.templateList[i].push(m.tag)
            })
          }
        }
      } catch (e) {
        e.type = 'modal'
        Exception.handle(e)
      }
    }
  },
  onShow () {
    if (this.$refs.notice) {
      this.$refs.notice.map(item => {
        item.restartAn()
      })
    }
  },
  onHide () {
    // 暂停notice组件的定时器任务
    if (this.$refs.notice) {
      this.$refs.notice.map(item => {
        item.pauseAn()
      })
    }

    // 暂停播放
    if (this.$refs.video) {
      this.$refs.video.map(item => {
        item.pauseFn()
      })
    }
  },
  onLoad (options) {
    let SKIN_ID = options.id || options.skin_id

    // #ifdef H5
    if (!SKIN_ID && GetQueryByString(location.href, 'SKIN_ID')) {
      SKIN_ID = GetQueryByString(location.href, 'SKIN_ID')
    }
    // #endif

    if (!SKIN_ID) {
      modal('SKIN_ID参数错误')
      return
    }

    this._init_func(SKIN_ID)
  }
}
</script>

<style lang="scss" scope="scope">
.home-wrap {
  width: 750rpx;
  overflow-x: hidden;
  background: #f8f8f8;
  position: relative;
  min-height: 100vh;
  .section {
    position: relative;
    //搜索框特殊
    &.search {
      position: static;
    }
  }
}

</style>
